<template>
    <div class="layout">
        <TopMenu @changeSiderMenu="changeSiderMenu"></TopMenu>
        <div class="main">
            <SiderMenu :data="siderMenuData"></SiderMenu>
            <div class="content">
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive" />
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import TopMenu from '@/components/topMenu.vue';
import SiderMenu from '@/components/siderMenu.vue';

const siderMenuData = ref([]);
const changeSiderMenu = (list: any[]) => {
    siderMenuData.value = list;
}
</script>

<style lang="less" scoped>
.layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .main {
        flex: 1;
        display: flex;

        .content {
            flex: 1;
        }
    }
}
</style>